import { createWebHashHistory, createRouter, RouteRecordRaw } from 'vue-router'
import LoginVue from '@/views/Login/index.vue'
import HomeVue from '@/views/home/index.vue'
import { useUserStore } from '@/store/userStore'
import { GetCurrentUserInfoApi } from '@/api';
import { generateMenu } from '@/utils'
const routes: RouteRecordRaw[] = [
    {
        path: '/login',
        name: 'login',
        component: LoginVue
    },
    {
        path: '/',
        name: '',
        component: HomeVue,
        children: [
            {
                path: 'home',
                name: 'home',
                component: () => import('../views/home/Home.vue')
            }
        ]
    }
];

const router = createRouter({
    routes,
    history: createWebHashHistory(), // history mode will be supported by vue-router v4+ only. 描述：如果使用
})

router.beforeEach((to, from, next) => {
    let token = localStorage.getItem('token');
    // 注意，不能在函数之外使用 useXXXStore 
    const userStore = useUserStore();

    // 如果在已经登录的情况下，不让用户手动跳转到登录
    if (token && to.path == '/login') {
        // 跳回原来的页面
        next(from.fullPath)
    } else

        // 判断pinia里面有没有 当前 用户的权限数据，如果有就不做事情 ，数据是从pinia里面来的，所以是判断pinia里面的数据是否存在
        // 如果没有，需要向服务器请求对应权限回来，然后记得存到 pinia 里面
        if (token && userStore.routesList.length === 0) {
            // 发请求
            GetCurrentUserInfoApi().then(res => {
                if (res.code === 200) {
                    // 存储用户权限数据到 pinia 中 
                    userStore.routesList = res.data.menus
                    userStore.userName = res.data.username;
                    // 在这里生成动态路由
                    // 动态路由确定是两层 {path:'',component: , children: [ {path:'',coponent} ]}
                    let arr = generateMenu(res.data.menus)
                    // console.log(arr)
                    // 遍历 arr ，生成动态路由表
                    arr.forEach(parent => {
                        const routeObj: RouteRecordRaw = {
                            // 我们后端给回来的数据，就是使用name属性存在的 路由的path
                            path: '/' + parent.name,
                            name: parent.name,
                            component: HomeVue,
                            children: []
                        }
                        parent.children?.forEach(child => {
                            const childRoute: RouteRecordRaw = {
                                path: child.name,
                                name: child.name,
                                // 我们要和后端约定好，组件的命名和位置 ， 目前我们的约束是： 父级的name是文件夹，子级的name是组件名称
                                component: () => import(`../views/${parent.name}/${child.name}.vue`)
                            }
                            routeObj.children.push(childRoute);
                        })
                        // 动态添加到路由表里面
                        // addRoute 也是异步的，异步的代码执行是需要时间的
                        router.addRoute(routeObj);
                    })

                    // console.log(router.getRoutes());

                    // 在这里使用跳转让页面显示出来
                    // 当addRoute在执行的过程中，next立刻放行，此时路由表里面还是没有路由的，需要让跳转重新进入 beforeEach，因为next也是异步的，所以next这个异步会在 addRoute 异步执行完之后再执行
                    next(to.fullPath);
                }
            })
        } else {
            next();
        }
})

export default router;